<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>视频监测 - 苗情灾情监测系统</title>
    <link rel="stylesheet" href="css/style.css">
    <link rel="stylesheet" href="css/components.css">
    <link rel="stylesheet" href="css/video.css">
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
</head>
<body>
    <main class="video-container main-container">
        <!-- 左侧监控点列表 -->
        <div class="camera-list">
            <div class="search-box">
                <input type="text" placeholder="搜索监控点..." id="searchCamera">
                <i class="fas fa-search"></i>
            </div>
            <div class="camera-groups">
                <!-- A区水稻监控组 -->
                <div class="group-item">
                    <div class="group-header">
                        <i class="fas fa-chevron-down"></i>
                        <span>A区水稻监控</span>
                        <span class="camera-count">2</span>
                    </div>
                    <div class="camera-items">
                        <div class="camera-item active" data-id="camera1">
                            <div class="camera-info">
                                <span class="status online"></span>
                                <span class="name">A-1 水稻田东</span>
                            </div>
                            <div class="camera-actions">
                                <button class="btn-icon" title="云台控制">
                                    <i class="fas fa-gamepad"></i>
                                </button>
                                <button class="btn-icon" title="历史回放">
                                    <i class="fas fa-history"></i>
                                </button>
                            </div>
                        </div>
                        <div class="camera-item" data-id="camera2">
                            <div class="camera-info">
                                <span class="status online"></span>
                                <span class="name">A-2 水稻田西</span>
                            </div>
                            <div class="camera-actions">
                                <button class="btn-icon" title="云台控制">
                                    <i class="fas fa-gamepad"></i>
                                </button>
                                <button class="btn-icon" title="历史回放">
                                    <i class="fas fa-history"></i>
                                </button>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- B区小麦监控组 -->
                <div class="group-item">
                    <div class="group-header">
                        <i class="fas fa-chevron-down"></i>
                        <span>B区小麦监控</span>
                        <span class="camera-count">3</span>
                    </div>
                    <div class="camera-items">
                        <div class="camera-item" data-id="camera3">
                            <div class="camera-info">
                                <span class="status online"></span>
                                <span class="name">B-1 小麦田北</span>
                            </div>
                            <div class="camera-actions">
                                <button class="btn-icon" title="云台控制">
                                    <i class="fas fa-gamepad"></i>
                                </button>
                                <button class="btn-icon" title="历史回放">
                                    <i class="fas fa-history"></i>
                                </button>
                            </div>
                        </div>
                        <div class="camera-item" data-id="camera4">
                            <div class="camera-info">
                                <span class="status online"></span>
                                <span class="name">B-2 小麦田中</span>
                            </div>
                            <div class="camera-actions">
                                <button class="btn-icon" title="云台控制">
                                    <i class="fas fa-gamepad"></i>
                                </button>
                                <button class="btn-icon" title="历史回放">
                                    <i class="fas fa-history"></i>
                                </button>
                            </div>
                        </div>
                        <div class="camera-item" data-id="camera5">
                            <div class="camera-info">
                                <span class="status online"></span>
                                <span class="name">B-3 小麦田南</span>
                            </div>
                            <div class="camera-actions">
                                <button class="btn-icon" title="云台控制">
                                    <i class="fas fa-gamepad"></i>
                                </button>
                                <button class="btn-icon" title="历史回放">
                                    <i class="fas fa-history"></i>
                                </button>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- C区玉米监控组 -->
                <div class="group-item">
                    <div class="group-header">
                        <i class="fas fa-chevron-down"></i>
                        <span>C区玉米监控</span>
                        <span class="camera-count">3</span>
                    </div>
                    <div class="camera-items">
                        <div class="camera-item" data-id="camera6">
                            <div class="camera-info">
                                <span class="status online"></span>
                                <span class="name">C-1 玉米地东</span>
                            </div>
                            <div class="camera-actions">
                                <button class="btn-icon" title="云台控制">
                                    <i class="fas fa-gamepad"></i>
                                </button>
                                <button class="btn-icon" title="历史回放">
                                    <i class="fas fa-history"></i>
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- 主视频区域 -->
        <div class="video-main">
            <div class="video-player">
                <video id="mainVideo" autoplay muted></video>
                <div class="video-overlay">
                    <div class="video-info">
                        <h3>A-1 水稻田东</h3>
                        <span class="status-text">正在直播</span>
                    </div>
                    <div class="video-controls">
                        <button class="btn-control" id="playPause">
                            <i class="fas fa-pause"></i>
                        </button>
                        <button class="btn-control" id="snapshot">
                            <i class="fas fa-camera"></i>
                        </button>
                        <button class="btn-control" id="record">
                            <i class="fas fa-record-vinyl"></i>
                        </button>
                        <button class="btn-control" id="fullscreen">
                            <i class="fas fa-expand"></i>
                        </button>
                    </div>
                </div>
            </div>
            
            <!-- 缩略图预览 -->
            <div class="thumbnail-list">
                <div class="thumbnail active">
                    <img src="images/camera-preview/a1.jpg" alt="A-1">
                    <span class="status online"></span>
                </div>
            </div>
        </div>

        <!-- 右侧控制面板 -->
        <div class="control-panel">
            <!-- 云台控制 -->
            <div class="panel-section">
                <h3>云台控制</h3>
                <div class="ptz-controls">
                    <div class="ptz-pad">
                        <button class="ptz-btn up"><i class="fas fa-chevron-up"></i></button>
                        <button class="ptz-btn right"><i class="fas fa-chevron-right"></i></button>
                        <button class="ptz-btn down"><i class="fas fa-chevron-down"></i></button>
                        <button class="ptz-btn left"><i class="fas fa-chevron-left"></i></button>
                        <button class="ptz-btn center"><i class="fas fa-dot-circle"></i></button>
                    </div>
                    <div class="zoom-controls">
                        <button class="zoom-btn" data-zoom="in">
                            <i class="fas fa-plus"></i>
                        </button>
                        <button class="zoom-btn" data-zoom="out">
                            <i class="fas fa-minus"></i>
                        </button>
                    </div>
                </div>
            </div>

            <!-- 预设位置 -->
            <div class="panel-section">
                <h3>预设位置</h3>
                <div class="preset-list">
                    <button class="preset-btn">位置1</button>
                    <button class="preset-btn">位置2</button>
                    <button class="preset-btn">位置3</button>
                </div>
            </div>

            <!-- 右侧信息面板 -->
            <div class="info-panel">
                <!-- 历史记录 -->
                <div class="panel-card">
                    <h3>历史记录</h3>
                    <div class="history-tabs">
                        <button class="tab-btn active" data-tab="snapshots">
                            <i class="fas fa-camera"></i> 截图记录
                        </button>
                        <button class="tab-btn" data-tab="videos">
                            <i class="fas fa-video"></i> 录像记录
                        </button>
                    </div>
                    
                    <!-- 截图记录列表 -->
                    <div class="history-content" id="snapshots">
                        <div class="history-item">
                            <div class="history-preview">
                                <img src="images/snapshot1.jpg" alt="截图预览">
                                <div class="preview-overlay">
                                    <button class="btn-icon" title="查看大图">
                                        <i class="fas fa-search-plus"></i>
                                    </button>
                                    <button class="btn-icon" title="下载">
                                        <i class="fas fa-download"></i>
                                    </button>
                                </div>
                            </div>
                            <div class="history-info">
                                <div class="info-header">
                                    <span class="camera-name">A区东北角</span>
                                    <span class="capture-time">2024-03-20 10:30</span>
                                </div>
                                <p class="capture-note">发现病虫害区域</p>
                            </div>
                        </div>
                        
                        <div class="history-item">
                            <div class="history-preview">
                                <img src="images/snapshot2.jpg" alt="截图预览">
                                <div class="preview-overlay">
                                    <button class="btn-icon" title="查看大图">
                                        <i class="fas fa-search-plus"></i>
                                    </button>
                                    <button class="btn-icon" title="下载">
                                        <i class="fas fa-download"></i>
                                    </button>
                                </div>
                            </div>
                            <div class="history-info">
                                <div class="info-header">
                                    <span class="camera-name">B区西南角</span>
                                    <span class="capture-time">2024-03-20 09:15</span>
                                </div>
                                <p class="capture-note">日常巡检记录</p>
                            </div>
                        </div>
                    </div>

                    <!-- 录像记录列表 -->
                    <div class="history-content hidden" id="videos">
                        <div class="history-item">
                            <div class="history-preview video">
                                <img src="images/video-thumb1.jpg" alt="视频预览">
                                <span class="video-duration">02:30</span>
                                <div class="preview-overlay">
                                    <button class="btn-icon" title="播放">
                                        <i class="fas fa-play"></i>
                                    </button>
                                    <button class="btn-icon" title="下载">
                                        <i class="fas fa-download"></i>
                                    </button>
                                </div>
                            </div>
                            <div class="history-info">
                                <div class="info-header">
                                    <span class="camera-name">A区东北角</span>
                                    <span class="capture-time">2024-03-19 15:00</span>
                                </div>
                                <p class="capture-note">异常行为记录</p>
                                <div class="video-meta">
                                    <span><i class="fas fa-clock"></i> 2分30秒</span>
                                    <span><i class="fas fa-hdd"></i> 25.8MB</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </main>

    <script src="js/components/navbar.js"></script>
    <script src="js/main.js"></script>
    <script src="js/video.js"></script>
    <script>
        document.addEventListener('DOMContentLoaded', () => {
            Navbar.init();
        });
    </script>
</body>
</html> 